/* 品牌教育 */
<template>
  <div class="education">
    <Banner url="education/banner.jpg"></Banner>
    <div class="floor">
      <Row :gutter="16">
        <Col
          v-for="item in items"
          :key="item.title"
          :lg="{span:8}"
          :xs="{span:24}"
          style="overflow: hidden"
        >
          <Card :bordered="false" style="height:480px">
            <img :src="item.imgSrc" alt="" srcset="">
            <p class="title" v-html="item.title"></p>
            <div class="content" v-html="item.introduce"></div>
            <Button>立即申请是听课程</Button>
          </Card>
        </Col>
      </Row>
    </div>
    <div class="floor">
      <Row :gutter="16">
        <Col
          v-for="item in items1"
          :key="item.title"
          :lg="{span:8}"
          :xs="{span:24}"
          style="overflow: hidden"
        >
          <Card :bordered="false" style="height:480px;">
            <img :src="item.imgSrc" alt="" srcset="">
            <p class="title">{{item.title}}</p>
            <div class="content" v-html="item.introduce"></div>
            <Button>立即申请试听课程</Button>
          </Card>
        </Col>
      </Row>
    </div>
    <div class="floor">
      <Row :gutter="16">
        <Col
          v-for="item in items2"
          :key="item.title"
          :lg="{span:8}"
          :xs="{span:24}"
          style="overflow: hidden"
        >
          <Card :bordered="false" style="height:480px">
            <img :src="item.imgSrc" alt="" srcset="">
            <p class="title">{{item.title}}</p>
            <div class="content" v-html="item.introduce"></div>
            <Button>立即申请试听课程</Button>
          </Card>
        </Col>
      </Row>
    </div>
    <div class="floor">
      <Row :gutter="16">
        <Col
          v-for="item in items3"
          :lg="{span:8}"
          :xs="{span:24}"
          :key="item.title"
          style="overflow: hidden"
        >
          <Card :bordered="false" style="height:480px">
            <img :src="item.imgSrc" alt="" srcset="">
            <p class="title">{{item.title}}</p>
            <div class="content" v-html="item.introduce"></div>
            <Button>立即申请试听课程</Button>
          </Card>
        </Col>
      </Row>
    </div>
    <div class="floor">
      <Row :gutter="16">
        <Col v-for="item in items4" :lg="{span:8}"
          :xs="{span:24}" :key="item.title" style="overflow: hidden">
          <Card :bordered="false" style="height:480px">
            <img :src="item.imgSrc" alt="" srcset="">
            <p class="title">{{item.title}}</p>
            <div class="content" v-html="item.introduce"></div>
            <Button>立即申请试听课程</Button>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          imgSrc: require("../assets/images/education/item-1.jpg"),
          title: "唯乐钢琴",
          introduce:
            "钢的琴是一家专业从事 </br> 钢琴教育和音乐艺术性培养的教育机构,</br>以提高青少年儿童的音乐素质为宗旨，</br>并培养一批具有专业潜能的学生  </br> 送往高等院校继续深造，</br>和国内外一流艺术院校建立了良好的合作关系。"
        },
        {
          imgSrc: require("../assets/images/education/item-2.jpg"),
          title: `N<sup>+</sup>街舞`,
          introduce:
            "N+街舞，专注街舞教育培训，全面提高青少儿、 </br> 成人的综合素质教育，</br>是以街舞教学、街舞演绎为一体的专业街舞机构。</br>我们的教学理念  </br> 是“寓教于乐，对每一位学员负责”。"
        },
        {
          imgSrc: require("../assets/images/education/item-3.jpg"),
          title: "华艺舞校",
          introduce:
            "华艺舞校独创专业教材， </br> 以科学的教学方式培养出优质的舞蹈人才，</br>受到舞蹈业内各界的认可，拥有多家连锁机构。</br>我们的教学理念  </br> 华艺舞校在聘用舞蹈专业本科以上学历教师的基础上，</br>所有授课教师统一经过专业教师培训，</br>熟练掌握华艺舞校专业舞蹈教学技能，为学员授课。"
        }
      ],
      items1: [
        {
          imgSrc: require("../assets/images/education/item-4.jpg"),
          title: "乐维童画",
          introduce:
            "乐维童画艺术教育以“儿童为本”， </br> 旨在搭建以儿童视角为艺术价值观的国际艺术拓展平台。</br>提倡认同儿童视角、关注儿童艺术成长、</br>激发儿童的内在潜能，  </br> 全面拓展2-16岁青少年儿童视觉艺术领域的国际化视野。</br>培养具备7大核心素养的国际化青少年。"
        },
        {
          imgSrc: require("../assets/images/education/item-5.jpg"),
          title: "领越科教",
          introduce:
            "领越科教设备有限公司是一家</br> 致力于3-13岁青少年科技创新教育的企业，</br>专业从事青少年机器人课程研发、培训，</br>科教设备研发、销售，创客空间的打造，  </br> 竞赛组织与科技活动服务等业务。"
        },
        {
          imgSrc: require("../assets/images/education/item-6.jpg"),
          title: "卓艺书画",
          introduce:
            "卓艺书画开设硬笔书法、毛笔书法和国画课程， </br> 坚持传统书画艺术，</br>秉持着书画同源的教学理念，</br>让孩子从静中发现艺术、在艺术氛围中发现自己！"
        }
      ],
      items2: [
        {
          imgSrc: require("../assets/images/education/item-7.jpg"),
          title: "紫竹瑜伽",
          introduce:
            "紫竹瑜伽专注瑜伽六年， </br> 以艾扬格瑜伽为练习根基，专业调理亚健康。</br>专业、有爱、可信赖的师资团队，</br>多样丰富的课程、优雅的环境、贴心的服务，  </br> 引导自我疗愈之路，开启身心平衡之门。"
        },
        {
          imgSrc: require("../assets/images/education/item-8.jpg"),
          title: "至正弘仁跆拳道",
          introduce:
            "没有一个父母希望自己的孩子是懦弱的！</br> 父母对于孩子最大的爱，</br>是让孩子掌握一项可以保护自己的本领，</br>走到哪里都不怕危险。  </br> 选择至正，助力人生！"
        },
        {
          imgSrc: require("../assets/images/education/item-9.jpg"),
          title: "凡盛超模星学院",
          introduce:
            "我们是集艺术培训、童星包装、商业演出为一体 </br> 的综合性专业模特学院，</br>被誉为培养儿童模特的摇篮，常年滚动开班，</br>并提供各类演出机会，教学与实践相结合，</br>为各大电视栏目、童装品牌、影视公司、广告公司 </br>输送了大量的童模和演员。"
        }
      ],
      items3: [
        {
          imgSrc: require("../assets/images/education/item-10.jpg"),
          title: "新秀拉丁舞",
          introduce:
            "新秀国际舞蹈学校创办于2014年， </br> 我校秉承着“文舞相融，德艺双馨”的教学理念，</br>开心快乐的教学方式，</br>培养了一批批优秀的艺术人才，  </br> 我们专注教学，突破创新，人性化的服务，</br> 受到了广大家长的认可支持与一致好评。"
        },
        {
          imgSrc: require("../assets/images/education/item-11.jpg"),
          title: "格莱美音乐",
          introduce:
            "N+街舞，专注街舞教育培训，全面提高青少儿、</br> 成人的综合素质教育，</br>是以街舞教学、街舞演绎为一体的专业街舞机构。</br>我们的教学理念  </br> 是“寓教于乐，对每一位学员负责”。"
        },
        {
          imgSrc: require("../assets/images/education/item-12.jpg"),
          title: "乐体体育",
          introduce:
            "乐体体育针对4-12岁青少年 </br> 提供包含专业性及趣味性的篮球教学。</br>乐体体育执着于塑造学员乐观开朗、</br>积极向上的性格，锻炼自律、勤奋等意志，</br>在挖掘每一个孩子潜力上，力求做到最好。 "
        }
      ],
      items4: [
        {
          imgSrc: require("../assets/images/education/item-13.jpg"),
          title: "领秀口才",
          introduce:
            "我们拥有专业的师资团队， </br> 电视台资深主持、记者任教，</br>多渠道输送孩子参加各类大型活动，</br>并且可以组织孩子参加口语考级。  </br> 全面专业的训练方法</br> 让您的孩子敢说话、能说话、会说话。"
        },
        {
          imgSrc: require("../assets/images/education/item-14.jpg"),
          title: "陶工坊",
          introduce:
            "N+陶艺是一种创造性艺术，而孩子的创造力是与生俱来的。</br> 幼儿用双手或操作简单的工具进行陶艺创作活动时，</br>根据需要用手对泥作搓、捏、拉、团等动作，</br>随心所欲地进行打平、垒高、滚圆、拉长等造型，  </br> 产生创作的灵感，从而使大脑自由发挥想象，</br>左右脑思维协调发展，创新思维由此得以萌发。"
        }
      ]
    };
  }
};
</script>

<style lang="less">
.education {
  .banner {
    img {
      width: 100%;
    }
  }
  .floor {
    width: 1200px;
    margin: 0 auto 80px;
    @media screen and (max-width: 768px) {
      width: 100%;
      .ivu-row {
        margin: 0 !important;
      }
    }
    .ivu-card {
      position: relative;
      .ivu-card-body {
        cursor: pointer;
        padding: 0;
        img {
          width: 100%;
        }
        .title {
          font-size: 28px;
          color: #f19fc2;
          width: 95%;
          margin: auto;
        }
        .content {
          width: 95%;
          margin: auto;
        }
        .ivu-btn {
          position: absolute;
          width: 80%;
          bottom: 10px;
          left: 0;
          right: 0;
          margin: auto;
          background: #f19fc2;
          color: #fff;
        }
      }
    }
  }
}

</style>